<template>
  <div class="Wrapper">
    <div class="account__container">
      <div class="account__container__right">
        <div class="right-content">
          <img src="@/assets/img/logo.png" class="logo" alt="logo" />
          <h1 class="title">{{ mainStore.pageTitle }}</h1>
        </div>
      </div>
      <div class="account__container__left">
        <div class="login_header">
          <span :class="{ Active: current == item.way }" @click="current = item.way" v-for="item in Tabs" :key="item.way">{{ item.name }}</span>
        </div>

        <div class="yz-from">
          <div class="account-input">
            <p class="Area-code">中国 +86</p>
            <div class="account-input_wrapper">
              <input type="text" placeholder="请输入手机号" maxlength="11" v-model="Phone" class="account-input__input" :class="{ Warn: PhoneLose }" @focus="focusPhone" @blur="blurPhone" />
              <p class="input__warning" :class="{ themeColor: PhoneLose }">
                {{ phoneTips_text }}
              </p>
            </div>
          </div>

          <div class="account-captcha" v-if="current == 1">
            <input type="text" v-model="Code" @focus="code_text = ''" @blur="blurCode" maxlength="6" class="captcha" placeholder="输入短信验证码" />
            <div class="captcha__btn" :class="{ getOk: getCode }" @click="getCodenNum">
              {{ codeText }}
            </div>
            <span class="password__error themeColor">{{ code_text }}</span>
          </div>

          <div class="account-captcha" v-if="current == 2">
            <input :type="islook ? 'text' : 'password'" v-model="Password" class="captcha" :class="{ Warn: password_text }" placeholder="输入登录密码" @focus="focusPassword" @blur="blurPassword" />
            <div class="Slip">
              <span class="iconfont islook" :class="islook ? 'icon-yanjing1' : 'icon-Close'" @click="changeLookPass"></span>
              <span class="slipPass" @click="forgetPass">忘记密码</span>
            </div>
            <span class="password__error themeColor">{{ password_text }}</span>
          </div>

          <!-- <Agree /> -->

          <button type="submit" @click="Login" class="btn_primary" :class="{ btn_primary_agree: agreelogin }">登录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ElMessage, ElMessageBox } from 'element-plus';
  import Agree from './components/Agree.vue';
  import Http from '@/utils/http';
  import { sendCode } from '@/utils/Api';
  import { debounce, validatePhone } from '@/utils/utils';
  import { useMainStore } from '@/stores/useMain';

  const mainStore = useMainStore();
  const router = useRouter();
  const Tabs = ref([
    // {
    //   name: '验证码登录',
    //   way: 1,
    // },
    {
      name: '账号登录',
      way: 2,
    },
  ]);
  const Phone = ref('');
  const Code = ref('');
  const current = ref(2);
  const phoneTips_text = ref('');
  const password_text = ref('');
  const code_text = ref('');
  const islook = ref(false);
  const Password = ref('');
  const PhoneLose = ref(false);
  const timer = ref(null);
  const Countdown = ref(60);

  const Login = debounce(() => {
    let requestData = {
      phone: Phone.value,
    };
    if (current.value == 1 && (!Phone.value || !Code.value)) return;
    if (current.value == 2 && (!Phone.value || !Password.value)) return;
    if (current.value == 1) requestData['code'] = Code.value;
    if (current.value == 2) requestData['password'] = Password.value;
    Http.post({
      url: '/yp_admin/login',
      data: requestData,
    }).then((res) => {
      if (res.code !== 200) {
        return current.value == 1 ? (code_text.value = res.msg) : (password_text.value = res.msg);
      }
      const result = res.data;
      if (!result.token) return;
      mainStore.token = result.token;
      mainStore.userInfo = result;

      router.replace('/');
    });
  }, 500);

  const focusPhone = () => {
    phoneTips_text.value = '验证完成后，可使用该手机号登录或找回密码';
    PhoneLose.value = false;
  };

  const blurPhone = () => {
    PhoneLose.value = true;
    if (!Phone.value) return (phoneTips_text.value = '请输入手机号');
    if (!validatePhone(Phone.value)) return (phoneTips_text.value = '手机号格式不正确');
    phoneTips_text.value = '';
    PhoneLose.value = false;
  };

  const blurCode = () => {
    if (!Code.value) return (code_text.value = '短信验证码是 6 位数字');
  };
  const focusPassword = () => {
    password_text.value = '';
  };
  const blurPassword = () => {
    if (!Password.value) password_text.value = '请输入密码';
  };
  const changeLookPass = () => {
    islook.value = !islook.value;
  };

  const getCodenNum = () => {
    if (!getCode.value || timer.value) return;
    const resultCode = sendCode(Phone.value);
    if (!resultCode) return;
    timer.value = setInterval(() => {
      Countdown.value--;
      if (Countdown.value <= 0) {
        clearInterval(timer.value);
        Countdown.value = 60;
        timer.value = null;
      }
    }, 1000);
  };

  const forgetPass = () => {
    ElMessage('请联系管理员');
  };

  const agreelogin = computed(() => {
    if (current.value == 1) {
      return Phone.value && Code.value;
    } else if (current.value == 2) {
      return Phone.value && Password.value;
    }
  });

  const getCode = computed(() => {
    if (Phone.value && validatePhone(Phone.value)) return true;
  });

  const codeText = computed(() => {
    if (!timer.value) return '获取验证码';
    return `重新获取(${Countdown.value})`;
  });

  watch(current, (newValue) => {
    Phone.value = '';
    Code.value = '';
    Password.value = '';
    phoneTips_text.value = '';
    password_text.value = '';
    mainStore.agreement = false;
    mainStore.automatic = false;
    clearInterval(timer.value);
    Countdown.value = 60;
    timer.value = null;
  });

  onBeforeUnmount(() => {
    clearInterval(timer.value);
    Countdown.value = 60;
    timer.value = null;
  });
</script>

<style scoped lang="scss">
  .Wrapper {
    width: 100vw;
    height: 100vh;
    background-color: #f2f3f5;
    @include Flex;

    .account__container {
      display: flex;
      align-items: center;

      &__left {
        width: 550px;
        height: 520px;
        padding: 50px 56px 60px;
        border-radius: 6px;
        background: #fff;
        position: relative;
        box-sizing: border-box;

        .login_header {
          display: flex;
          align-items: center;
          padding-bottom: 30px;
          font-size: 20px;
          color: #969799;

          span {
            cursor: pointer;
            user-select: none;
          }

          .Active {
            color: #333333;
            font-size: 26px;
            font-weight: 500;
            cursor: default !important;
          }
        }

        .login_header span:first-child {
          margin-right: 24px;
        }

        .yz-from {
          width: 100%;

          .account-input {
            display: flex;
            padding-top: 30px;
            position: relative;

            .Area-code {
              width: 140px;
              height: 48px;
              position: relative;
              font-size: 16px;
              display: flex;
              align-items: center;
              border-bottom: 1px solid #dcdee0;
              margin-right: 16px;
            }

            .account-input_wrapper {
              flex: 1;
              height: 48px;
              position: relative;

              .account-input__input {
                padding: 0;
                width: 100%;
                height: 100%;
                color: #333;
                font-size: 16px;
                font-family: inherit !important;
                border-bottom: 1px solid #dcdee0;
              }

              .input__warning {
                position: absolute;
                bottom: -24px;
                right: 0;
                color: #969799;
                font-size: 14px;
                vertical-align: baseline;
                box-sizing: border-box;
              }
            }
          }

          .account-captcha {
            width: 100%;
            position: relative;
            margin-top: 32px;

            .captcha {
              width: 100%;
              height: 48px;
              font-size: 16px;
              border-bottom: 1px solid #dcdee0;
            }

            .captcha__btn {
              color: #969799;
              font-size: 16px;
              position: absolute;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
              cursor: not-allowed;
              user-select: none;
            }

            .getOk {
              color: $color_155;
              cursor: pointer;
            }

            .Slip {
              height: 48px;
              position: absolute;
              right: 0;
              top: 0;
              padding: 0 10px;
              display: flex;
              align-items: center;

              .islook {
                font-size: 20px;
                color: #ccc;
                cursor: pointer;
                margin-right: 20px;
              }

              .slipPass {
                display: block;
                color: $color_155;
                font-size: 16px;
                padding-left: 20px;
                position: relative;
                cursor: pointer;
              }

              .slipPass::after {
                content: '';
                width: 1px;
                height: 14px;
                background-color: #ebedf0;
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
              }
            }

            .password__error {
              position: absolute;
              bottom: -24px;
              right: 0;
              color: #969799;
              font-size: 14px;
              vertical-align: baseline;
              box-sizing: border-box;
            }
          }

          .btn_primary {
            width: 100%;
            height: 48px;
            appearance: none;
            font-size: 18px;
            background-color: #f7f7f7;
            opacity: 0.8;
            color: #ccc;
            letter-spacing: 4px;
            transition: all 0.3s;
            margin-top: 120px;
          }

          .btn_primary_agree {
            background-color: $color_155;
            color: #fff;
            opacity: 1;
            cursor: pointer;
          }
        }
      }

      &__right {
        width: 380px;
        height: 520px;
        // background: #fff;
        border-radius: 6px;
        margin-right: 18px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;

        .right-content {
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;

          .logo {
            width: 120px;
            height: 120px;
            object-fit: contain;
            margin-bottom: 20px;
            border-radius: 50%;
          }

          .title {
            font-size: 26px;
            color: #333;
            font-weight: 500;
            margin-top: 30px;
            caret-color: transparent;
          }
        }
      }
    }
  }

  input::placeholder {
    color: #ccc;
    font-family: inherit !important;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
  }

  /* 禁用浏览器自动填充的背景色 */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: #333 !important;
    transition: background-color 5000s ease-in-out 0s;
  }

  .account-input__input:focus,
  .captcha:focus {
    border-bottom: 1px solid #155bd4 !important;
  }

  .Warn {
    border-bottom: 1px solid $theme-color !important;
  }
</style>
